import BrainMap from '../index';
import React, { useRef, useState } from 'react';
import { Button, Select } from 'antd';

const originData = {
  id: '0',
  code: 'totalPL',
  name: '节点1',
  label: '节点1',
  children: [
    {
      id: '1',
      code: 'node1',
      name: '节点2',
      label: '节点2',
    },
    {
      id: '2',
      code: 'node2',
      name: '节点3',
      label: '节点3',
    },
  ],
};

export const NodeDetailPanel = ({
  onChange,
  value,
}: {
  onChange: (value: any) => void;
  value: { label: string; value: string };
}) => {
  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'xiaomi', value: 'xiaomi' },
    { label: 'vivo', value: 'vivo' },
  ];

  return (
    <div>
      <div>节点名称：</div>
      <Select
        style={{ width: 200 }}
        placeholder="请选择"
        options={options}
        labelInValue
        value={value}
        onChange={(v: { value: string; label: string }) => {
          onChange({ code: v.value, name: v.label, label: v.label });
        }}
      />
    </div>
  );
};

export default () => {
  const ref = useRef<any>();
  const [data, setData] = useState({
    originData: [originData],
    singleNodes: [],
  });
  const handleFinish = () => {
    const graph = ref.current?.graph;
    console.log(graph.toJSON());
  };
  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" onClick={handleFinish}>
          保存
        </Button>
      </div>
      <div style={{ height: '700px' }}>
        <BrainMap
          data={data}
          renderPanel={<div>请选择节点</div>}
          onDataChange={(v, singleNodes) => {
            console.log(v, singleNodes, '是这里');
            setData({ originData: v, singleNodes });
          }}
          ref={ref}
          renderEditPanel={(selectNode, setNodeData) => {
            console.log(selectNode, 'selectNode111');
            return (
              <div
                style={{
                  flex: '0 0 250px',
                  background: '#fff',
                  padding: '10px',
                }}
              >
                <NodeDetailPanel
                  value={{ label: selectNode.name, value: selectNode.code }}
                  onChange={setNodeData}
                />
              </div>
            );
          }}
        />
      </div>
    </div>
  );
};
